<script setup lang="ts">
import { useInitialStore } from '@/store'

import PageSearch from '@/components/PageSearch/PageSearch.vue'
import PageContent from '@/components/PageContent/PageContent.vue'
import PageModal from '@/components/PageModal/PageModal.vue'

import { searchFormConfig } from './config/search.config'
import { contentTableConfig, propList } from './config/content.config'
import { modalConfig } from './config/modal.config'

import { usePageModal } from '@/hooks/usePageModal'
import { usePageSearch } from '@/hooks/usePageSearch'
const initialStore = useInitialStore()
// 搜索重置
const [pageContentRef, handleResetClick, handleQueryClick] = usePageSearch()

// modal 配置信息
const modalConfigRef: any = computed(() => {
  const parentIdItem = modalConfig.formItems?.find(
    (item: any) => item.field === 'parentId'
  )
  // 数据加工
  parentIdItem!.options = initialStore.entireDepartment.map((item) => {
    return { label: item.name, valuie: item.id }
  })
  return modalConfig
})
// 弹出框操作
const [modalInfo, pageModalRef, handleEditData, handleNewData] = usePageModal()
</script>

<template>
  <div class="department">
    <PageSearch
      :search-form-config="searchFormConfig"
      @reset-btn-click="handleResetClick"
      @query-btn-click="handleQueryClick"
    ></PageSearch>
    <PageContent
      ref="pageContentRef"
      :content-table-config="contentTableConfig"
      :prop-list="propList"
      page-name="department"
      @newBtnClick="handleNewData"
      @editBtnClick="handleEditData"
    ></PageContent>
    <PageModal
      ref="pageModalRef"
      :modal-info="modalInfo"
      :modal-config="modalConfigRef"
      page-name="department"
    ></PageModal>
  </div>
</template>

<style scoped></style>
